<template>
	<view>
		<!-- 导航栏 -->
		<navBar pageTitle="壁纸类别" />
		
		<!-- #ifdef H5 -->
		<view :style="{height:'120rpx'}">
		</view>
		<!-- #endif -->

		<!-- 内容 -->
		<view class="contain">
			<div class="cards-wrapper">
				<div class="card-container">
					<div class="card" :class="rotateShow ? 'rotated' : ''">
						<div @tap="preView(hotList)" class="card-contents card-front">
							<div class="card-depth">
								<view @tap.stop="rotateShow = !rotateShow" class="card-view">
									<text class="card-icon iconfont icon-31xuanzhuan"></text>
								</view>
							</div>
						</div>
						<div  @tap="preView(hotsList)" class="card-contents card-back">
							<div class="card-depth">
								<view @tap.stop="rotateShow = !rotateShow" class="card-views card-view">
									<text class="card-icon iconfont icon-31xuanzhuan"></text>
								</view>
							</div>
						</div>
					</div>
				</div>
			</div>
			

			<!-- 壁纸分类 -->
			<view class="category">
				<view @tap="preView(item.arr)" class="category-item" v-for="(item,i) in categoryList" :key="i">
					<image :src="item.imgUrl" v-show="!loadingShow" @load="load" class="category-img" mode="aspectFill"></image>
					<loading v-if="loadingShow"></loading>
					<view class="category-info" :class="i%2!==0 ? 'singular-info' :''">
						<text class="category-text">{{item.name}}</text>
					</view>
				</view>

				<view class="category-empty">------没有内容咯------</view>
			</view>
			
		</view>

		<!-- 底部导航栏 -->
		<tabBar pagePath="pagesB/divideClass/divideClass"></tabBar>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				loadingShow:true,
				rotateShow: false,
				cardBg:'https://snowcyans.gitee.io/static-warehouse/static/xy.jpg'
			};
		},
		methods: {
			load(e){
				// console.log(e);
				this.loadingShow = false
			},
			// 预览图片
			preView(arr) {
				uni.navigateTo({
					url: '/pages/preView/preView',
					success: (res) => {
						res.eventChannel.emit('wallPaperData', arr)
					}
				})
			}
		},
		onLoad() {
			uni.hideTabBar()
		},
		computed:{
			...mapState('category',['hotList','hotsList','categoryList'])
		}
	}
</script>

<style lang="scss" scoped>
	.contain {
		padding: 0 30rpx;
		
		// 翻转卡片
		@keyframes spin {
			to {
				transform: rotateY(-360deg);
			}
		}
		
		@keyframes show {
			to {
				opacity: 1;
			}
		}
		
		@keyframes flicker-on-2 {
			0% {
				opacity: 0;
			}
		
			10% {
				opacity: 1;
			}
		
			15% {
				opacity: 0;
			}
		
			30% {
				opacity: 1;
			}
		
			55% {
				opacity: 1;
			}
		
			57% {
				opacity: 0;
			}
		
			75% {
				opacity: 0;
			}
		
			76% {
				opacity: 1;
			}
		
			99% {
				opacity: 0;
			}
		
			100% {
				opacity: 1;
			}
		}
		
		.component-wrapper {
			position: absolute;
		}
		
		.scene {
			width: 300rpx;
			height: 300rpx;
			margin: auto;
			perspective: 100rem;
			animation: flicker-on-2 1s linear 1500ms forwards;
			opacity: 0;
		}
		
		.wrapper {
			width: 100%;
			height: 100%;
			transform: rotateX(-8deg) rotateY(0deg);
			transform-style: preserve-3d;
		}
		
		.globe {
			position: relative;
			width: 70%;
			height: 70%;
			margin: 0 auto;
			transform-style: preserve-3d;
			animation: spin 25s 0ms linear infinite;
		}
		
		.ring {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border: .3rem;
			border-style: dotted;
			border-radius: 50%;
			color: #7ad4f8;
			animation: show 0.75s forwards ease-in-out;
			opacity: 0;
		}
		
		.ring:nth-child(1) {
			transform: rotateY(4deg);
		}
		
		.ring:nth-child(2) {
			transform: rotateY(30deg);
		}
		
		.ring:nth-child(3) {
			transform: rotateY(56deg);
		}
		
		.ring:nth-child(4) {
			transform: rotateY(82deg);
		}
		
		.ring:nth-child(5) {
			transform: rotateY(108deg);
		}
		
		.ring:nth-child(6) {
			transform: rotateY(134deg);
		}
		
		.ring:nth-child(7) {
			transform: rotateY(160deg);
		}
		
		.ring:nth-child(8) {
			transform: rotateY(4deg) rotateX(75deg) scale(2);
			border-style: dashed;
		}
		
		.ring:nth-child(9) {
			transform: rotateY(4deg) rotateX(75deg) scale(1.75);
			border-style: solid;
		}
		
		.ring:nth-child(10) {
			transform: rotateY(4deg) rotateX(75deg) scale(1.5);
			border-style: dashed;
		}
		
		.card {
			margin: auto;
			height: 300rpx;
			width: 600rpx;
			position: relative;
			border-radius: 35rpx;
			transition: all .8s ease;
			transform-style: preserve-3d;
			box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.2)
		}
		
		.rotated {
			transform: rotateY(-180deg);
		}
		
		.card-contents {
			width: 100%;
			height: 100%;
			border-radius: 25px;
			display: flex;
			align-items: center;
			flex-direction: column;
			text-align: center;
			position: absolute;
			top: 0;
			left: 0;
			backface-visibility: hidden;
			
			.card-view{
				position: relative;
				top: 100rpx;
				left: 0;
				width: 100rpx;
				height: 100rpx;
				color: #bf52ef;
				border-radius: 35rpx;
		
				.card-icon {
					font-size: 100rpx;
					font-weight: 400;
				}
			}
			.card-views{
				transform: rotate(180deg);
			}
		}
		
		.card-depth {
			transform: translateZ(100px) scale(0.98);
			perspective: inherit;
		
		}
		
		.card-front {
			background-image: url('https://snowcyans.gitee.io/static-warehouse/static/jx10.jpg');
			background-size: cover;
			transform-style: preserve-3d;
		}
		
		.card-back {
			transform: rotateY(180deg);
			background-image: url('https://snowcyans.gitee.io/static-warehouse/static/myxh.jpg');
			background-size: cover;
			background-position: 100%,100%;
			background-repeat: no-repeat;
			transform-style: preserve-3d;
		}

		// 壁纸类别
		.category {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 50rpx;
			padding: 0 10rpx;

			.category-item {
				position: relative;
				width: 48%;
				height: 230rpx;
				backdrop-filter: blur(3px); //毛玻璃效果
				box-shadow: 0 0 30px 10px rgba(0, 0, 0, .3);
				border-radius: 35rpx;
				margin-bottom: 30rpx;

				.category-img {
					width: 100%;
					height: 230rpx;
					border-radius: 35rpx;
				}

				.category-info {
					position: absolute;
					top: 0;
					right: 0;
					width: 60rpx;
					height: 230rpx;
					line-height: 120rpx;
					backdrop-filter: blur(3px); //毛玻璃效果
					box-shadow: 0 0 30px 10px rgba(0, 0, 0, .3);
					text-align: center;
					color: #fff;
				}

				.singular-info {
					left: 0;
				}
			}
		}

		.category-empty {
			width: 100%;
			height: 100rpx;
			margin: 10rpx 0 120rpx 0;
			text-align: center;
			font-size: 20rpx;
		}
	}
</style>